/**
 * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
 * @description 全局样式
 */

@charset "utf-8";

@import './normalize.scss';
@import './transition.scss';
@import './loading.scss';
$base: '.vab';

@mixin scrollbar {
  max-height: 88vh;
  margin-bottom: 0.5vh;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    //background-color: rgba(144, 147, 153, 0.3);
    background: none;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    //background-color: rgba(144, 147, 153, 0.3);
    background: none;
  }
}

@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
    display: none;
  }
  //
  //&::-webkit-scrollbar-thumb {
  //  background-color: rgba(0, 0, 0, 0.4);
  //  background-clip: padding-box;
  //  border: 3px solid transparent;
  //  border-radius: 7px;
  //}
  //
  //&::-webkit-scrollbar-thumb:hover {
  //  background-color: rgba(0, 0, 0, 0.5);
  //  background-color: rgba(0, 0, 0, 0.5);
  //}
  //
  //&::-webkit-scrollbar-track {
  //  background-color: transparent;
  //}
  //
  //&::-webkit-scrollbar-track:hover {
  //  background-color: #f8fafc;
  //}
}

img {
  object-fit: cover;
}

a {
  color: $base-color-blue;
  text-decoration: none;
  cursor: pointer;
}

ul {
  list-style: none
}

* {
  // transition: $base-transition;
}
svg {
  transition: none;
  * {
    transition: none;
  }
}

html {
  body {
    position: relative;
    height: 100vh;
    padding: 0;
    margin: 0;
    font-family: "微软雅黑", Avenir, Helvetica, Arial, sans-serif;
    font-size: $base-font-size-default;
    color: #2c3e50;
    background: $base-body-background;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @include base-scrollbar;

    div {
      @include base-scrollbar;
    }
    // 透明度不为1会影响bpmn中svg的点击事件
    svg,
    i {
      &:hover {
        opacity: 1;
      }
    }

    .v-modal {
      backdrop-filter: blur(10px);
    }
    /* el-card开始 */
    .el-card {
      box-shadow: none !important;
      border: none;
    }
    /* el-tag结束 */

    /* el-tag开始 */
    .el-tag + .el-tag {
      margin-left: 10px;
    }

    /* el-tag结束 */

    /* markdown编辑器开始 */
    .editor-toolbar {
      .no-mobile,
      .fa-question-circle {
        display: none;
      }
    }

    /* markdown编辑器结束 */

    /* 间隔线开始 */
    .el-divider--horizontal {
      margin: 10px 0 10px 0;

      .el-divider__text {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    /* 间隔线结束 */

    /* 大图展示开始 */
    .el-image-viewer {
      &__close {
        .el-icon-circle-close {
          color: $base-color-white;
        }
      }
    }

    /* 进度条开始 */
    #nprogress {
      position: fixed;
      z-index: $base-z-index;

      .bar {
        background: $base-color-blue !important;
      }

      .peg {
        box-shadow: 0 0 10px $base-color-blue, 0 0 5px $base-color-blue !important;
      }
    }

    .el-popover {
      min-width: 60px;
    }
    /* 进度条结束 */

    /* 表格开始 */

    .el-table {
      .el-table__body-wrapper {
        @include base-scrollbar;
      }

      th {
        background: #f5f7fa;
      }

      td,
      th {
        position: relative;
        box-sizing: border-box;
        padding: 7.5px 0;

        .cell {
          font-size: $base-font-size-default;
          font-weight: normal;
          color: #606266;

          .el-image {
            width: 50px;
            height: 50px;
            border-radius: $base-border-radius;
          }
        }
      }
    }

    /* 表格结束 */
    .vxe-table--tooltip-wrapper {
      transition: none;
    }
    .vxe-table--tooltip-arrow {
      transition: none;
    }

    /* 分页开始 */
    .el-pagination {
      padding: 2px 5px;
      margin: 10px 0 0 0;
      font-weight: normal;
      color: $base-color-black;
      text-align: center;
    }

    /* 分页结束 */

    .el-card__header {
      padding: 10px 20px;
    }

    /* 菜单开始 */
    .el-menu.el-menu--popup.el-menu--popup-right-start {
      @include scrollbar;
    }

    .el-menu.el-menu--popup.el-menu--popup-bottom-start {
      @include scrollbar;
    }
    // el-tabs
    .el-tabs__item.is-active {
      background: white;
    }
    /* 菜单结束 */

    /* 弹窗开始 */

    .el-dialog,
    .el-message-box {
      background: #1D2129;
      border: none;
      color: #FFFFFF;
      .el-message-box__title {
        color: #FFFFFF;
      }
      .el-message-box__content {
        color: #FFFFFF;
      }
      &__body {
        //border-top: 1px solid $base-border-color;

        .el-form {
          padding-right: 30px;
        }
      }
      &__wrapper {
        background: rgba(0, 0, 0, .6);
      }
      &__footer {
        padding: $base-padding;
        text-align: right;
        border-top: 1px solid $base-border-color;
      }

      &__content {
        padding: 20px 20px 20px 20px;
      }
    }
    .el-dialog__header {
      padding: 15px;
    }

    /* 弹窗结束 */

    /* 卡片开始 */
    .el-card {
      margin-bottom: 0;
      padding: 0;
      position: relative;

      &__body {
        padding: $base-padding;
      }
    }

    /* 卡片结束 */

    /* 下拉树样式-----------开始 */
    .select-tree-popper {
      .el-scrollbar {
        .el-scrollbar__view {
          .el-select-dropdown__item {
            height: auto;
            max-height: 274px;
            padding: 0;
            overflow-y: auto;
            line-height: 26px;
          }
        }
      }
    }
    .side-bar-container {
      .el-menu-item,
      .el-submenu {
        margin: 7px !important;
        border-radius: 5px !important;
        &:hover {
          background: $base-liner-gradient !important;
          border-radius: 5px !important;
        }

        &.is-active {
          background: $base-liner-gradient !important;
        }
      }
    }
    /* 下拉树样式-----------结束 */

    /* 树形样式-----------开始 */
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: rgba(36, 116, 181, 0.3);
    }
    .el-tree-node__content:hover {
      background-color: rgba(36, 116, 181, 0.3);
    }
    /* 树形样式-----------结束 */
  }
}

.vxe-toolbar {
  position: absolute !important;
  top: -51px;
  height: 30px !important;
  right: 0;
}
.vxe-table--render-default.size--small {
  font-size: 12px!important;
}
.header-right {
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  margin-left: 12px !important;

  &:hover {
    fill: #5faeff !important;
  }
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-between{
  justify-content: space-between;
  align-items: center;
}
.flex-around{
  justify-content: space-around;
  align-items: center;
}
// 字体显示一行，超出部分省略号
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// 去除输入框number 加减符号
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0;
  -moz-appearance: textfield;
}

//在需要用100%宽度的时候给select加上
.size-full{
  width: 100%;
}
.dialog-title{
  font-size:14px;font-weight:500
}
// 手动给富文本编辑器表格添加边框线 css
.html {
  table {
    border-collapse: collapse;
  }
  td, th {
    border: 1px solid #ccc;
    min-width: 50px;
    height: 20px;
  }
  th {
    background-color: #f1f1f1;
  }
}
.etc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-select {
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;    /* Internet Explorer/Edge */
  user-select: none;        /* Standard syntax */
}
// 修改控制台报错Blocked aria-hidden
.el-radio input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}
// 适配黑色主题
.el-timeline-item__content {
  color: #FFFFFF;
}
.el-popover {
  background: $base-content-background;
  border: none;
  color: #FFFFFF;
}
.el-descriptions__body {
  background: none;
  color: #FFFFFF;
}
.el-input__count {
  background: none!important;
  color: #FFFFFF;
}
.el-input-number__decrease {
  border-right: #39414E;
}
.el-input-number__increase {
  border-left: #39414E;
}
.el-collapse-item__header, .el-collapse-item__wrap {
  background: $base-content-background;
  color: #FFFFFF;
}
.vxe-table--tooltip-wrapper {
  z-index: 2010!important;
}
.el-button--default {
  background: none;
  color: $base-color-default;
  border-color: $base-color-default;
}
.el-button.is-plain:hover, .el-button.is-plain:focus {
  background: none;
}
.el-input__inner,.el-textarea__inner {
  border-color: #39414E;
  background: #272C36;
  color: #FFFFFF;
}
.el-input__count-inner {
  background: none !important;
  color: #FFFFFF;
}
.el-select-dropdown {
  background: #272C36;
  border-color: #39414E;
}
.el-select-dropdown__item {
  color: #FFFFFF;
}
.el-popover {
  background: #272C36 !important;
}
.popper__arrow {
  border-bottom-color: #272C36 !important;
  &::after {
    border-bottom-color: #272C36 !important;
  }
}
.el-image__error {
  background: #39414E;
}
.el-card__header {
  border-bottom: none;
}
.el-form-item__label {
  color: #FFFFFF;
}
.el-card {
  background: $base-content-background;
}
.vxe-cell--label {
  color: #FFFFFF;
}
.vxe-cell--html {
  color: #FFFFFF;
}
.vxe-table--render-default .vxe-table--body-wrapper {
  background: $base-content-background;
}
.vxe-table--header-wrapper {
  background: #272C36!important;
}
.vxe-header--column  {
  background: #272C36 !important;
  color: #FFFFFF;
}
.el-checkbox__label{
  color: #FFFFFF;
}
.el-radio__label {
  color: #FFFFFF;
}
.el-dropdown-menu {
  background: #121418;
  border: none;
  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
  .el-dropdown-menu__item {
    color: #FFFFFF;
  }
  .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    background: none;
  }
  .popper__arrow {
    border-bottom-color: #121418 !important;
    &::after {
      border-bottom-color: #121418!important;
    }
  }
}
.el-tabs__nav-wrap::after {
  background: none!important;
}
.el-tabs__item {
  color: #FFFFFF!important;
}
.el-tabs__item.is-active {
  background: none !important;
  color: $base-color-default !important;
}
.liner-button {
  background: $base-liner-gradient !important;
  min-width: 120px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: $base-color-white !important;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  padding: 0 20px;
  margin: 0 10px;
  &-disabled {
    //background: #39414E !important;
    cursor: not-allowed;
  }
}
.tips-popper {
  background: #121418 !important;
  max-width: 590px;
  .tips-content {
    padding: 5px;
    box-sizing: border-box;
    .tips-header {
      align-items: center;
      background: #1D2129;
      padding: 10px;
      border-radius: 5px;
      >span {
        margin-left: 8px;
      }
    }
    .main-title {
      font-size: 12px;
      color: #FFFFFF;
      margin-top: 10px;
    }
    .content-title {
      margin-top: 10px;
      font-size: 12px;
      color: #B6C7D1;
      line-height: 18px;
      p {
        margin: 0;
      }
    }
  }
}
.prompt-popup {
  padding: 8px;
  .popper__arrow {
    border-right-color: #272C36 !important;
    &::after {
      border-right-color: #272C36 !important;
    }
  }
  .role-popup {
    width: 100%;
    .role-popup-content {
      max-height: 200px;
      overflow-y: auto;
      margin-top: 10px;
      .role-item {
        padding: 8px 16px;
        font-size: 12px;
        cursor: pointer;
      }
      .role-item:hover {
        background-color: #333B4A;
      }
    }
    .role-popup-empty {
      font-size: 12px;
      .el-empty__image {
        width: 80px;
      }
    }
  }
}
.params-popover {
  width: 400px;
  cursor: pointer;
  .params-popover-content {
    font-size: 12px;
    line-height: 18px;
  }
  .popper__arrow {
    border-top-color: #272C36!important;
    &::after {
      border-top-color: #272C36!important;
    }
  }
}
.confirm-pop {
  background: #121418 !important;
}
.comment-popover {
  .bottom-button {
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    >div {
      margin-left: 10px;
      font-size: 12px;
      min-width: 0;
      height: 28px;
      line-height: 28px;
      padding: 0 20px;
      cursor: pointer;
      &:nth-child(1) {
        border: 1px solid $base-color-default;
        border-radius: 4px;
      }
    }
  }
}
.error-content {
  width: 100%;
  height: 100%;
  background: #39414E;
  color: #5C6872;
  font-size: 12px;
  >span {
    margin-top: 10px;
  }
  >i {
    font-size: 25px;
  }
}
// 确认弹窗按钮
.el-button-confirm-custom {
  background: $base-liner-gradient !important;
  color: #FFFFFF;
  border: none;
  &:hover {
    background: $base-liner-gradient!important;
  }
}
.el-button-cancel-custom {
  &:hover {
    border-color: $base-color-default!important;
    background: none!important;
  }
}
